<template>
	<view class="product-list">
		<view v-for="item in productArr" :key="item.id" class="product-item" @click="handleDetail(item)">
			<view class="product-name">{{ item.home_name }}</view>
			<wd-img custom-class="product-img" mode="aspectFill" :src="$IMG_PREFIX + item.icon">
				<template #error>
				  <view class="error-wrap">加载失败</view>
				</template>
				<template #loading>
				  <view class="loading-wrap">
					<wd-loading />
				  </view>
				</template>
			</wd-img>
			
			<!-- <view class="product-info">
				<view class="name">{{ item.home_name }}</view>
				
				<view class="price-info">
					<view class="price">¥{{ item.price }}</view>
					<view @click="handleDetail(item)" class="btn-buy">购买</view>
				</view>
			</view> -->
		</view>
	</view>
	
	<!-- v-if="props.showBottom" -->
	<view class="finshed">———到底啦———</view>
</template>

<script lang="ts" setup>
import { getServiceData } from '@/api/maintenance'
import { Service } from '@/api/home'
import { useOrder } from '@/store/order'

defineOptions({
	options: {
		styleIsolation: 'shared'
	}
})

const orderStore = useOrder()

const props = defineProps({
	recommend: {
		type: String,
		default: '0'
	}
	// showBottom: {
	// 	type: Boolean,
	// 	default: false
	// }
})

const productArr = ref<Service[]>([])

onShow(() => {
	initData()
})

async function initData() {
	const data = await getServiceData({
		recommend: props.recommend
	})
	productArr.value = data.service ? data.service : data
}
// 跳转详情
function handleDetail(item: AnyObject) {
	const token = uni.getStorageSync('token')

	if (!token) {
		uni.showToast({
			icon: 'none',
			title: '未登录，跳转到我的页面进行登录'
		})
		
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/me/me'
			})
		}, 2000)
		return
	}
	orderStore.setOrderInfo(item)
	uni.navigateTo({
		// url: '/pages/maintenance/details/details',
		url: '/pages-sub/order/info',
		// success: (res) => {
		// 	// 通过eventChannel向被打开页面传送数据
		// 	// res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
		// 	uni.$emit('details', item)
		// }
	})
}
</script>

<style lang="scss" scoped>
	.product-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 21px;
		
		:deep(.product-item) {
			.product-name {
				font-size: 20px;
				font-weight: 900;
				line-height: 20px;
				color: #23282C;
			}
			.product-img {
				margin-top: 18px;
				width: 100%;
				border-radius: 8px;
				/* Shadow Grey */
				box-shadow: 0px 8px 10px 0px rgba(241, 244, 249, 1);
				// box-shadow: 0 4px 8px rgba(0,0,0,0.2);
				background-color: #fff;
				height: 228px;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					height: 165px;
					// border-top-left-radius: 8px;
					// border-top-right-radius: 8px;
				}
			}
			
			.error-wrap, .loading-wrap {
				// border-top-left-radius: 8px;
				// border-top-right-radius: 8px;
				border-radius: 8px;
				background-color: rgba(#989898, 0.4);
				color: #fff;
				// height: 228px;
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.product-info {
				padding: 6px 10px 11px 10px;
				color: #000;
				.name {
					font-size: 12px;
					font-weight: 600;
					line-height: 22px;
				}
				
				.price-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 10px;
					
					.price {
						font-size: 12px;
						font-weight: 600;
						line-height: 22px;
					}
					.btn-buy {
						background-color: $uni-main-color;
						width: 63px;
						height: 28px;
						line-height: 28px;
						border-radius: 8px;
						color: #fff;
						font-size: 12px;
						font-weight: 600;
						text-align: center;
						&:active {
							background-color: rgba($uni-main-color, 0.9)
						}
					}
				}
			}
		}
	}
	
	.finshed {
		padding-top: 25px;
		text-align: center;
		color: #A5A5A5;
		font-size: 12px;
	}
</style>